<template>
  <section class='flex tens fade-before fade-after'
           :style='"--pct:"+(Math.floor(timeDifference(websiteConfig.websiteCreateTime) / 36.5))'>
    <h5 class="part-title">共赴十年之约</h5>
    <ul class='flex-ul'>
      <li class="box progress"></li>
      <li class="start-date">
        <time>{{ timeInfoComputed(websiteConfig.websiteCreateTime,0) }}</time>
      </li>
      <li class="end-date">
        <time>{{ timeInfoComputed(websiteConfig.websiteCreateTime,10) }}</time>
      </li>
    </ul>
  </section>
</template>

<script lang='ts'>
import { computed, defineComponent } from 'vue'
import { useAppStore } from '@/stores/app'
import { timeDifference, timeInfoComputed } from '@/utils/commonUtil'

export default defineComponent({
  name: 'Tens',
  methods: { timeDifference, timeInfoComputed },
  setup(){
    const appStore = useAppStore()
    return{
      websiteConfig: computed(() => {
        return appStore.websiteConfig
      })
    }
  }
})
</script>
